<template>
  <view id="text-container">{{ truncatedText }}</view>
</template>

<script>
export default {
  name: "TextLine",
  props: {
    content: String
  },
  data() {
    return {
      truncatedText:""
    };
  },
  mounted() {
    this.adjustText();
  },
  methods: {
    adjustText() {
      const spaceChar = '\u00A0';
      const query = uni.createSelectorQuery().in(this);
      query.select('#text-container').boundingClientRect(rect => {
        const averageCharWidth = 14 ;//字体大小
        const number= Math.floor(rect.width / averageCharWidth);//一行展示多少个字
        let hang = Math.floor(this.content.length / number);//一共需要多少行
        if (hang > 2) { //行数大于2
          this.truncatedText = this.content.substring(0, number*2) + `...${spaceChar.repeat(5)}>>去看看！`;
        } else {
          this.truncatedText = this.content+`${spaceChar.repeat(3)}>>去看看！`;
        }
      }).exec();
    }
  }
}
</script>

<style scoped>

</style>
